<template>
  <div class="box" :class="{ longBox: type == 'long' }">
    <div class="box-title">
      {{ props.title }}
      <img v-if="type == 'long'" class="box-title-bg" src="@/assets/title_box_bg.png" />
      <img v-else class="box-title-bg" src="@/assets/title_box_small_bg.png" />
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
// props title
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.box {
  display: inline-block;
  position: relative;
  width: 500px;
  box-sizing: border-box;

  .box-title {
    display: flex;
    height: 34px;
    line-height: 1;
    font-size: 24px;
    position: relative;
    color: #50b5e9;
    margin-bottom: 12px;
  }
  .box-title-bg {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.longBox {
  flex: 1;
  width: 100%;
}
</style>
